<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
</script>

<template>
  <el-container style="height: 100vh">
    <!-- 侧边栏 -->
    <el-aside width="220px" style="background: #2d3a4b; color: #fff; display: flex; flex-direction: column; justify-content: space-between;">
      <div>
        <div class="logo-area">
          <div class="system-title">管理系统</div>
        </div>
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#2d3a4b"
          text-color="#fff"
          active-text-color="#409EFF"
          router
        >
          <el-menu-item index="/">
            <i class="el-icon-s-home"></i>
            <span>工作台</span>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>仓库管理</template>
            <el-menu-item index="/inbound">入库管理</el-menu-item>
            <el-menu-item index="/outbound">出库管理</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/business">业务管理</el-menu-item>
          <el-menu-item index="/finance">财务管理</el-menu-item>
          <el-sub-menu index="2">
            <template #title>报表管理</template>
            <el-menu-item index="/report/analysis">报表分析</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>基础资料</template>
            <el-menu-item index="/base/account">仓库台账</el-menu-item>
            <el-menu-item index="/base/warning">库存预警</el-menu-item>
            <el-menu-item index="/base/list">库存清单</el-menu-item>
            <el-menu-item index="/base/summary">期末汇总</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/system">系统设置</el-menu-item>
        </el-menu>
      </div>
      <!-- 底部消息和退出 -->
      <div class="sidebar-footer">
        <el-badge :value="50" class="item" style="margin-right: 16px;"><i class="el-icon-bell"></i> 消息</el-badge>
        <el-button type="text" icon="el-icon-switch-button" style="color: #fff;">退出</el-button>
      </div>
    </el-aside>
    <!-- 主体 -->
    <el-container>
      <el-header style="background: #fff; box-shadow: 0 1px 4px rgba(0,21,41,.08);">
        <!-- 可放置面包屑、用户信息等 -->
      </el-header>
      <el-main style="background: #f5f6fa;">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0 12px 0;
}
.logo {
  width: 80px;
  height: 80px;
  margin-bottom: 8px;
}
.system-title {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
}
.sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  border-top: 1px solid #334055;
}
</style>